<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="./template/StakeholderTemplate.xhtml">
    <ui:define name="begin">
        <f:view beforePhase="#{stakeholderManagerBean.initIndustryType}"></f:view>
    </ui:define>
    <ui:define name="contentInsert">
        <h:body>
            <h:form id="formMain">
                <h1>Stakeholder Registration</h1>

                <p:panel id="panel" header="Please complete all fields of the form">
                    <p:ajaxStatus style="width:16px;height:16px;">
                        <f:facet name="start">
                            <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>
                    <p:messages />

                    <h3>Select an ID and password</h3>
                    <p:separator />
                    <h:panelGrid columns="3" cellpadding="10">
                        <h:outputLabel for="username" style="font-weight: bold" value="Stakeholder username: *" />
                        <p:inputText required="true" label="Username" requiredMessage="Stakeholder username is required." id="username" value="#{stakeholderManagerBean.stakeholder.username}">
                            <p:ajax event="blur" update="usernameMsg" />
                        </p:inputText>
                        <p:message id="usernameMsg" for="username"/>

                        <h:outputLabel for="password" style="font-weight: bold" value="Password: *" />
                        <h:inputSecret required="true" label="Password" requiredMessage="Password is required." id="password" value="#{stakeholderManagerBean.stakeholder.password}">
                            <p:ajax event="blur" update="passwordMsg" />
                        </h:inputSecret>
                        <p:message id="passwordMsg" for="password" />

                        <h:outputLabel for="password" style="font-weight: bold" value="Retype Password: *" />
                        <h:inputSecret required="true" label="Retype password" requiredMessage="Please retype your password" 
                                     validator="#{stakeholderManagerBean.validatePassword}" id="retypedpassword" value="#{stakeholderManagerBean.retypedPassword}">
                            <p:ajax event="blur" update="retypedpasswordMsg" />
                        </h:inputSecret>
                        <p:message id="retypedpasswordMsg" for="retypedpassword" />
                    </h:panelGrid>

                    <br/> 

                    <h3>Provide information about your business</h3>
                    <p:separator />
                    <h:panelGrid columns="3" cellpadding="10">

                        <h:outputLabel for="corpName" style="font-weight: bold" value="Corporate name: *" />
                        <p:inputText required="true" label="Corporate name" requiredMessage="Corporate name is required." id="corpName" value="#{stakeholderManagerBean.stakeholder.corpName}">
                            <p:ajax event="blur" update="corpNameMsg" />
                        </p:inputText>
                        <p:message id="corpNameMsg" for="corpName" />

                        <h:outputLabel for="bizRegNumber" style="font-weight: bold" value="Business Registration Number: *" />
                        <p:inputText required="true" label="Business Registration Number" requiredMessage="Business Registration Number is required." id="bizRegNumber" value="#{stakeholderManagerBean.stakeholder.bizRegNumber}">
                            <p:ajax event="blur" update="bizRegNumberMsg" />
                        </p:inputText>
                        <p:message id="bizRegNumberMsg" for="bizRegNumber" />               
                    </h:panelGrid>

                    <h3>Select your company's business function *</h3>
                    <p:dataTable var="industryType" value="#{stakeholderManagerBean.industryTypeList}" selection="#{stakeholderManagerBean.industryType}" paginator="true" rows="10">
                        <p:column selectionMode="single" />

                        <p:column headerText="Name">
                            <h:outputText value="#{industryType.name}" />
                        </p:column>

                        <p:column headerText="Description">
                            <h:outputText value="#{industryType.description}" />
                        </p:column>
                    </p:dataTable>

                    <br/>

                    <h3>Contact details</h3>
                    <p:separator />
                    <h:panelGrid columns="3" cellpadding="10">    

                        <h:outputLabel for="houseNumber" style="font-weight: bold" value="House Number: *" />
                        <p:inputText required="true" label="houseNumber" requiredMessage="House Number is required." id="houseNumber" value="#{stakeholderManagerBean.stakeholderAddress.houseNumber}">
                            <p:ajax event="blur" update="houseNumberMsg" />
                        </p:inputText>
                        <p:message id="houseNumberMsg" for="houseNumber" />

                        <h:outputLabel for="buildingName" style="font-weight: bold" value="Building name: *" />
                        <p:inputText required="true" label="buildingName" requiredMessage="Building Name is required." id="buildingName" value="#{stakeholderManagerBean.stakeholderAddress.buildingName}">
                            <p:ajax event="blur" update="buildingNameMsg" />
                        </p:inputText>
                        <p:message id="buildingNameMsg" for="buildingName" />

                        <h:outputLabel for="streetName" style="font-weight: bold" value="Street Name: *" />
                        <p:inputText required="true" label="streetName" requiredMessage="Street Name is required." id="streetName" value="#{stakeholderManagerBean.stakeholderAddress.streetName}">
                            <p:ajax event="blur" update="streetNameMsg" />
                        </p:inputText>
                        <p:message id="streetNameMsg" for="streetName" />

                        <h:outputLabel for="postalCode" style="font-weight: bold" value="Postal Code: *" />
                        <p:inputText required="true" label="postalCode" requiredMessage="Postal Code is required." id="postalCode" value="#{stakeholderManagerBean.stakeholderAddress.postalCode}">
                            <f:validator validatorId="customvalidator.PostalCodeValidator" />    
                            <p:ajax event="blur" update="postalCodeMsg" />
                        </p:inputText>
                        <p:message id="postalCodeMsg" for="postalCode" />

                        <h:outputLabel for="phoneNumber" style="font-weight: bold" value="Phone Number: *" />
                        <p:inputText required="true" label="Phone Number" requiredMessage="Phone Number is required." id="phoneNumber" value="#{stakeholderManagerBean.stakeholder.corpContactNumber}">
                            <f:validator validatorId="customvalidator.PhoneNumberValidator"/>
                            <p:ajax event="blur" update="phoneNumberMsg" />
                        </p:inputText>
                        <p:message id="phoneNumberMsg" for="phoneNumber" />                

                        <h:outputLabel for="fax" style="font-weight: bold" value="Fax: *" />
                        <p:inputText required="true" label="Fax" requiredMessage="Fax is required." id="fax" value="#{stakeholderManagerBean.stakeholder.corpFaxNumber}">
                            <f:validator validatorId="customvalidator.FaxNumberValidator"/>
                            <p:ajax event="blur" update="faxNumberMsg" />
                        </p:inputText>          
                        <p:message id="faxNumberMsg" for="fax" />

                        <h:outputLabel for="contactPerson" style="font-weight: bold" value="Contact Person: *" />
                        <p:inputText required="true" label="Contact Person" requiredMessage="Contact Person is required." id="contactPerson" value="#{stakeholderManagerBean.stakeholder.corpContactPerson}">
                            <p:ajax event="blur" update="contactPersonMsg" />
                        </p:inputText>
                        <p:message id ="contactPersonMsg" for="contactPerson" />

                        <h:outputLabel for="email" style="font-weight: bold" value="Email: *" />
                        <p:inputText required="true" label="Email" requiredMessage="Email is required." id="email" value="#{stakeholderManagerBean.stakeholder.corpEmail}">
                            <f:validator validatorId="customvalidator.EmailAddressValidator" />
                            <p:ajax event="blur" update="emailMsg" />
                        </p:inputText>
                        <p:message id="emailMsg" for="email" />
                    </h:panelGrid>   

                    <br/>
                    <h3>Captcha verification</h3>
                    <p:separator />
                    <h:panelGrid columns="2" cellpadding="10">
                        <p:captcha id="captcha" label="Captcha" />                        
                        <p:message id="captchaMsg" showDetail="true" for="captcha" />
                    </h:panelGrid>

                    <br/>
                    <h2>* indicates a required field</h2>
                    <br/>
                    <p:commandButton id="btn" value="Create New Stakeholder" update="panel" actionListener="#{stakeholderManagerBean.register}" ajax="false" />
                </p:panel>
            </h:form>
        </h:body>
    </ui:define>
</ui:composition>
